<template>
  <div class="content-box">
    <div class="tool">
      <div class="left"></div>
      <div class="right">
        <div class="icon">
          <el-icon @click="lockHandle">
            <Lock v-if="lockScale" />
            <Unlock v-else />
          </el-icon>
        </div>
        <el-select v-model="canvasConfig.scale" class="sf-select" :disabled="lockScale" size="small">
          <el-option v-for="item in scaleType" :key="item" :label="item" :value="item" />
        </el-select>
        <el-slider v-model="canvasConfig.scale" :disabled="lockScale" />
      </div>
    </div>
    <div class="export-tool">
      <el-tooltip v-for="(item, index) of exportTool" :key="index" class="tip-item" effect="dark" :content="item.name"
        placement="left">
        <div class="i-box" @click="handleTool(item.event)">
          <img :src="item.img" alt="" class="img" />
        </div>
      </el-tooltip>
    </div>
    <div class="content">
      <div ref="canvasRef" class="canvas" :style="canStyle" @drop="dragHandle" @dragover="dragoverHandle"
        @dragenter="dragoverHandle" @mousedown="clickHandle">
        <!-- 拖拽蒙层 -->
        <EditRange>
          <div>
            <EditShapeBox v-for="(element, index) of renderList" :key="index" :title="element.key" :element="element"
              :index="index" @contextmenu="handleContextmenu">
              <component :is="element.chartConfig.chartKey" :chartConfig="element" />
            </EditShapeBox>
          </div>
        </EditRange>
      </div>
    </div>

    <Comtextmenu v-model:menuShow="menuShow" :position="position" />
  </div>
</template>
<script setup>
import EditRange from "../EditRange/index.vue";
import EditShapeBox from "../EditShapeBox/index.vue";
import { computed, onMounted, reactive, ref } from "vue";
import { createComponent } from "../../../../packages/index.js";
import Comtextmenu from "./component/comtextmenu.vue";
import { colorCustomMerge } from "@/utils";
import store from "@/store";
import { Unlock, Lock } from "@element-plus/icons-vue";
import dc from "../../../../assets/common/export.png";
import dr from "../../../../assets/common/import.png";
import dct from "../../../../assets/common/e-img.png";
let scaleType = [40, 50, 60, 80, 100];
const DRAG_KEY = "chartdata";
// let canvasConfig = reactive({
//   scale: 40,
// })
let canvasRef = ref();
let menuShow = ref(false);
let position = reactive({
  top: 0,
  left: 0,
});
let exportTool = [
  {
    name: "导出",
    img: dc,
    event: "export",
  },
  {
    name: "导入",
    img: dr,
    event: "import",
  },
  {
    name: "选中组件导出图片",
    img: dct,
    event: "exportImg",
  },
];
let renderList = computed(() => {
  return store.state.chartEditStore.renderComponentList;
});
let canvasConfig = computed(() => {
  return store.state.chartEditStore.editCanvas;
});
let canvasPosition = computed(() => {
  return store.state.chartEditStore.canvasPosition;
});
let canStyle = computed(() => {
  let { width, height, background, backgroundImage, selectColor } =
    store.state.chartEditStore.editCanvasConfig;
  let bgc = selectColor
    ? { background }
    : { backgroundImage: `url(${backgroundImage})`, backgroundSize: "cover" };
  return {
    width: width + "px",
    height: height + "px",
    ...bgc,
    transform: `scale(${canvasConfig.value.scale / 100})`,
  };
});

function dragoverHandle(e) {
  e.preventDefault();
  e.stopPropagation();
  if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
}

onMounted(() => {
  let { x, y } = canvasRef.value.getBoundingClientRect();
  store.commit("chartEditStore/SET_CANVAS_POSITION", { x, y });
});

async function dragHandle(e) {
  let { x, y } = canvasPosition.value;
  let { pageX, pageY } = e;

  let drayDataString = e.dataTransfer.getData(DRAG_KEY);
  if (!drayDataString) return;
  let drayData = JSON.parse(drayDataString);
  // 创建新图表组件
  let newComponent = await createComponent(drayData);
  if (drayDataString.redirectComponent) {
    drayDataString.dataset &&
      (newComponent.option.dataset = drayDataString.dataset);
    newComponent.chartConfig.title = drayDataString.title;
    newComponent.chartConfig.chartFrame = drayDataString.chartFrame;
  }
  // let { offsetX, offsetY } = e

  let attr = newComponent.attr;
  attr.x = (pageX - x) / (canvasConfig.value.scale / 100) - attr.w / 2;
  attr.y = (pageY - y) / (canvasConfig.value.scale / 100) - attr.h / 2;
  attr.right =
    store.state.chartEditStore.editCanvasConfig.width - attr.w - attr.x;
  attr.bottom =
    store.state.chartEditStore.editCanvasConfig.height - attr.h - attr.y;
  // renderList.value.push(newComponent)
  store.commit("chartEditStore/ADD_COMPONENTLIST", newComponent);
  store.commit("chartEditStore/SET_SELECTCOMPONENT", newComponent);
}

function clickHandle() {
  store.commit("chartEditStore/SET_SELECTCOMPONENT", {});
}
function selectChart(element) {
  store.commit("chartEditStore/SET_SELECTCOMPONENT", element);
}
function handleContextmenu(e) {
  e.preventDefault();
  e.stopPropagation();
  menuShow.value = true;
  position.left = e.pageX + 10 + "px";
  position.top = e.pageY + "px";
}
function handleTool(event) {
  switch (event) {
    case "export":
      store.commit("chartEditStore/SET_EXPORT_PAGE");
      break;
    case "import":
      store.commit("chartEditStore/SET_IMPORT_PAGE");
      break;
    case "exportImg":
      store.commit("chartEditStore/SET_EXPORT_COMPONENT_IMG");
      break;
    default:
      break;
  }
}
// 是否锁定缩放
const lockScale = computed(
  () => store.state.chartEditStore.editCanvas.lockScale
);
function lockHandle() {
  store.commit("chartEditStore/SET_EDITCANVAS", {
    lockScale: !lockScale.value,
  });
}
// 配置项
// const themeColor = computed(() => {
//   const colorCustomMergeData = colorCustomMerge(
//     store.getters["chartEditStore/getEditCanvasConfig"]
//       .chartCustomThemeColorInfo
//   );
//   return colorCustomMergeData[
//     store.getters["chartEditStore/getEditCanvasConfig"].chartThemeColor
//   ];
// });
</script>

<style scoped lang="scss">
.content-box {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;

  .content {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;

    .canvas {
      margin-left: 40px;
      margin-top: 80px;
      // border: 1px dashed rgb(149, 126, 233);
      transform-origin: 80px 40px;
      position: relative;
      background-color: #eee;
    }
  }

  .tool {
    z-index: 99;
    position: absolute;
    bottom: 10px;
    width: calc(100% - 20px);
    height: 40px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #000000;
    border-color: #999;
    background-color: #d9d9d9;

    .left {
      flex: 3;
    }

    .right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .sf-select {
        width: 80px;
        background: transparent;
        color: #fff;
      }

      .icon {
        display: flex;
        align-items: center;
      }

      :deep(.el-slider) {
        width: 100px;
        --el-slider-button-size: 15px;
      }
    }
  }

  .export-tool {
    position: absolute;
    right: 10px;
    bottom: 100px;
    z-index: 2;
    width: 40px;
    background: #d9d9d9;
    border-radius: 24px;
    padding: 5px 0;
    display: flex;
    flex-direction: column;

    .i-box {
      width: 36px;
      height: 36px;
      margin: 0 auto;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 5px;

      .img {
        width: 24px;
        height: 24px;
      }

      &:hover {
        background: #0084fe;
      }
    }
  }
}
</style>
